import React, {Component} from 'react';
import {Text, View, TouchableNativeFeedback, Image} from 'react-native';
import {Navigation} from '../UseNavigation/index';
import styles from './style';
import {icons} from '../../assets/images';
const navBar = [
  {
    path: 'Home/Index',
    key: 'Index',
    text: '首页',
    icorn: icons.home,
    active_icorn: icons.active_home,
  },
  {
    path: 'Home/Tools',
    key: 'Tools',
    text: '功能',
    icorn: icons.tools,
    active_icorn: icons.active_tools,
  },
];
@Navigation
class BottonBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'Index',
    };
  }
  toPage = (path, key) => {
    this.setState({
      current: key,
    });
    this.props.navigation.navigate(path);
  };

  render() {
    const {current = 'Index'} = this.state;
    return (
      <View style={styles.container}>
        {navBar.map((item) => {
          const active = item.key === current;
          const source = active ? item.active_icorn : item.icorn;
          return (
            <TouchableNativeFeedback
              key={item.key}
              onPress={() => this.toPage(item.path, item.key)}>
              <View style={styles.button}>
                <Image
                  style={styles.icon}
                  resizeMode={'contain'}
                  source={source}
                />
                <Text style={active ? styles.active : styles.link}>
                  {item.text}
                </Text>
              </View>
            </TouchableNativeFeedback>
          );
        })}
      </View>
    );
  }
}

export default BottonBar;
